<!-- 付款信息 -->
<template>
  <div class="app-container">
    <div class="cardBox">
      <leftTree ref="leftTree" :data="treeData" node-key="id" :default-props="defaultProps" search-key="supplierName" width="200px" :default-expand-keys="defaultExpandKeys" :defalut-expand-all="true" @handleNodeClickAll="handleNodeClick" />
      <el-col id="right-content" class="right-content" :offset="0" :span="18">
        <div class="box-title">
          <el-breadcrumb separator="/" style="line-height:50px;">
            <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="search-and-button noLeftInput">
          <div class="btnList">
            <el-button type="primary" icon="el-icon-plus" @click="showDialog">新建</el-button>
            <ImportFile url="/purchase/payment/import" @getTableInfo="getTableInfo" />
            <el-button type icon="el-icon-refresh-left" @click="$router.push('/reload')">刷新</el-button>
            <el-button type icon="el-icon-more">更多</el-button>
            <el-button type="primary" plain :icon="!show ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" @click="show = !show">查询条件</el-button>
          </div>
        </div>
        <transition name="el-zoom-in-top">
          <div v-show="show" class="more-search">
            <el-form :model="search" label-width="80px">
              <el-row>
                <el-col :xs="24" :xl="8" :md="8">
                  <el-form-item label="付款日期" prop="beginDate">
                    <el-date-picker v-model="search.time" style="width: 100%" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期时间" @change="getTableInfo()" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :xl="8" :md="8">
                  <el-form-item label="付款编号" prop="objNo">
                    <el-input v-model="search.objNo" placeholder="请输入付款编号" clearable @keyup.enter.native="getTableInfo()" @clear="getTableInfo()" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </transition>
        <el-row class="table">
          <el-table ref="tableData" v-loading="loading" :data="tableData" stripe border @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column align="center" type="index" label="索引" width="60px" />
            <el-table-column v-for="item in fieldList" :key="item.id" :align="item.align || 'left'" :prop="item.code.split(':')[1]" :label="item.val" :min-width="item.width + 'px'" show-overflow-tooltip />
            <el-table-column label="操作" fixed="right" align="center" width="100px">
              <template #default="{ row }">
                <el-button-group>
                  <el-button type="text" @click="showDialog(row)">
                    <i class="iconfont icon-search"></i>
                  </el-button>
                  <!-- <el-button type="danger" icon="el-icon-delete" @click="deleteRow(row)" /> -->
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row class="numRight" v-if="JSON.stringify(num) !== '{}'">
          <div class="numRightDiv">
            <i class="iconfont icon-jisuanqi1"></i>
            <span>付款总金额:</span>
            <b>{{ num.statPrice }}</b>
            <span>待清总金额:</span>
            <b>{{ num.statPrice2 }}</b>
          </div>
        </el-row>
        <el-row>
          <div class="table-btn-box">
            <el-button @click="
                () => {
                  tableData.forEach(row => {
                    $refs['tableData'].toggleRowSelection(row, true)
                  })
                }
              ">选择全部</el-button>
            <el-button @click="
                () => {
                  tableData.forEach(row => {
                    $refs['tableData'].toggleRowSelection(row)
                  })
                }
              ">反向选择</el-button>
            <el-button @click="numGet()">
              统计
              <i class="iconfont icon-jisuanqi1" style="font-size:13px;"></i>
            </el-button>
            <el-button>
              更多菜单
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
          </div>
          <pagination ref="Pagination" :total="total" :current.sync="search.current" :size.sync="search.size" @pagination="getTableInfo" />
        </el-row>
      </el-col>
    </div>

    <!-- 新增编辑 -->
    <addAndModify ref="addAndModify" :comp-info="compInfo" :user-all-list="userAllList" @getTableInfo="getTableInfo" />
  </div>
</template>
<script>
import ImportFile from '@/components/ImportFile'
import Pagination from '@/components/Pagination'
import addAndModify from './components/index'
import leftTree from '@/components/LeftTree'
import { mapGetters } from 'vuex'
import { getUserListApi, getSupplierListApi } from '@/api/public'
export default {
  components: {
    ImportFile,
    leftTree,
    Pagination,
    addAndModify
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'supplierName'
      },
      defaultExpandKeys: ['-1'],
      breadcrumb: ['供应商'],
      loading: false,
      tableData: [],
      multipleSelection: [],
      total: 0,
      search: {
        objNo: '',
        current: 1,
        size: 20,
        keyword: '',
        treeStr: '-1',
        beginDate: '',
        endDate: '',
        time: []
      },
      userAllList: [],
      num: {},
      show: false
    }
  },
  computed: {
    ...mapGetters(['compInfo'])
  },
  created() {},
  mounted() {
    this.getTableInfo()
    this.getList()
    this.getUserAll()
  },
  methods: {
    async getUserAll() {
      const res = await getUserListApi()
      if (res?.data.code === 200) {
        this.userAllList = res.data.data
      }
    },
    timeDivide() {
      const { time } = this.search
      if (time && time.length) {
        this.search.beginDate = time[0]
        this.search.endDate = time[1]
      } else {
        this.search.beginDate = ''
        this.search.endDate = ''
      }
      const search = {
        ...this.search
      }
      delete search.time
      return search
    },
    /**
     * @description: page
     * @param {*} page
     * @return {*}
     */
    async getTableInfo(page = 1) {
      this.search.current = page
      let search = this.timeDivide()
      this.loading = true
      const res = await this.$axios.post('/purchase/payment/list', search)
      if (res?.data.code === 200) {
        this.tableData = res.data.data.list
        this.total = res.data.data.total
        setTimeout(() => {
          this.loading = false
        }, 100)
      } else {
        this.loading = false
      }
    },
    /* 统计 */
    async numGet() {
      let search = this.timeDivide()
      const res2 = await this.$axios.post('/purchase/payment/stat', search)
      if (res2?.data.code === 200) {
        this.num = res2.data.data
      }
    },
    /**
     * @description: 查询所有供应商
     * @return {*}
     */
    async getList() {
      const res = await getSupplierListApi()
      if (res?.data.code === 200) {
        this.treeData = [
          { id: '-1', supplierName: '供应商', children: res.data.data }
        ]
      }
    },
    /**
     * @description: 新增编辑
     * @return {*}
     */
    showDialog(row) {
      this.$refs['addAndModify'].showDialog(row)
    },
    /**
     * @description: 删除当前行数据
     * @param {*} row
     * @return {*}
     */
    deleteRow(row) {
      this.$confirm(`确认删除设备【${row.name}】？`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await this.$axios.delete(`/purchase/req/remove/${row.id}`)
          if (res.data.code === 200) {
            this.$notify.success('删除成功！')
            this.getTableInfo()
          } else {
            this.$notify.error(res.data.msg)
          }
        })
        .catch(() => {})
    },
    /**
     * @description: 树节点点击
     * @param {*} data
     * @param {*} node
     * @return {*}
     */
    handleNodeClick({ data, node }) {
      this.breadcrumb = []
      this.returnNodeLabel(node.parent)
      this.breadcrumb.push(data.supplierName)
      this.search.treeStr =
        data.supplierName === '供应商' ? '-1' : data.supplierName
      this.getTableInfo()
    },
    /**
     * @description: 递归获取名称
     * @param {*} node
     * @return {*}
     */
    returnNodeLabel(node) {
      if (node.parent) {
        this.breadcrumb.unshift(node.data.supplierName)
        this.returnNodeLabel(node.parent)
      }
    },
    /**
     * @description: 选中项
     * @param {*} val
     * @return {*}
     */
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style lang='scss' scoped>
.numRight {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  .numRightDiv {
    width: 350px;
    height: 35px;
    line-height: 30px;
    background: #f9f9f9;
    padding: 5px 8px;
    border-radius: 20px;
    box-shadow: 0px 1px 2px 0px rgb(224, 224, 224);
    i {
      padding-right: 5px;
      font-size: 15px;
    }
    span {
    }
    b {
      font-weight: normal;
      padding: 0 15px 0 5px;
      color: #1890ff;
    }
  }
}
</style>
